import React, { useEffect, useState } from 'react';
import { useParams,useNavigate } from 'react-router-dom';
import MusicHttp from '../model/MusicHttp';
import './index.css'
const Index = () => {
    const { id } = useParams();
    const navigator = useNavigate()
    const [songs, setSongs] = useState([])
    useEffect(async () => {
        const res = await MusicHttp.getDetailMusic(id)
        // console.log(res.data.playlist.tracks);
        res.data.playlist.tracks.forEach(item => {
            var { ar, dt } = item;
            item.time = MusicHttp.getTime(dt)
            ar.forEach(key => {
                var { name } = key;
                item.nameSong = name;
            })
        })

        setSongs(res.data.playlist.tracks)
    })
    return (
        <div className='all'>
            {songs.map((item, index) => {
                return (
                    <div className='songs' onClick={()=>{navigator(`/play/${item.name}`)}}>
                        <div>{index + 1}</div>
                        <div><img src={item.al.picUrl} alt="" /></div>
                        <div>
                            <p>{item.name}</p>
                            <p>{item.nameSong}</p>
                        </div>
                        <div>
                            {item.time}
                        </div>
                    </div>
                )
            })}
        </div>
    );
}

export default Index;
